<template>
  <yt-page class="lawLink" scroll title="任务状态">
    <div @click="onClick('programme')" :class="getClass(0)" class="row" first>
      <span class="row-icon">
        <i class="iconfont icon-fanganshenqing_huaban"></i>
      </span>
      <div class="row-text">现场检查方案</div>
    </div>
    <div @click="onClickReview(1)" :class="getClass(1)" class="row">
      <span class="row-icon">
        <i class="iconfont icon-querenhetongquerenhetongqueding"></i>
      </span>
      <div class="row-text">检查方案确认</div>
    </div>
    <div @click="onClick('record')" :class="getClass(2)" class="row">
      <span class="row-icon">
        <i class="iconfont icon-jilu"></i>
      </span>
      <div class="row-text">现场检查记录</div>
    </div>
    <div @click="onClick('rectify')" :class="getClass(3)" class="row">
      <span class="row-icon">
        <i class="iconfont icon-jingshigantanhao"></i>
      </span>
      <div class="row-text">责令限期整改</div>
    </div>
    <div @click="onClickReview(4)" :class="getClass(4)" class="row">
      <span class="row-icon">
        <i class="iconfont icon-dkw_shenhezhong"></i>
      </span>
      <div class="row-text">责令整改审核</div>
    </div>
    <div @click="onClick('review')" :class="getClass(5)" class="row" last>
      <span class="row-icon">
        <i class="iconfont icon-icon-chakanxq"></i>
      </span>
      <div class="row-text">
        整改复查任务
      </div>
    </div>
    <yt-split></yt-split>
    <yt-cell @click="onClick('disposal')" isLink ripple label="现场处理措施" font="iconfont icon-neirong" labelWidth="100px"></yt-cell>
    <yt-cell @click="onClick('detain')" isLink ripple label="查封扣押处置" font="iconfont icon-cheliangdiyadengji" labelWidth="100px"></yt-cell>
  </yt-page>
</template>

<script>
import { commonApi } from '@/common/api/commonApi.js'

export default {
  data() {
    return {
      data: null
    }
  },
  async activated() {
    this.data = await commonApi.searchById('law_plan', this.$route.query.id, {
      include: ['programme_id']
    })
  },
  methods: {
    onClick(path) {
      this.$router.$push({
        path: '/law/' + path,
        query: this.$route.query
      })
    },
    onClickReview(state) {
      let currentState = this.getClass(state)
      if (currentState === 'is-complete') return
      this.$Toast('请联系相关角色至pc端审核后，继续下一步！', 'tool')
    },
    getClass(state) {
      if (!this.data) return
      const COMPLETE = 'is-complete'
      const ACTIVE = 'is-active'
      switch (state) {
        case 0:
          if (this.data.state > 0) {
            return COMPLETE
          } else {
            let auditState = this.data.programme_id.attributes.auditState
            if (auditState === undefined) {
              return ACTIVE
            } else {
              return COMPLETE
            }
          }
        case 1:
          if (this.data.state > 0) {
            return COMPLETE
          } else {
            let auditState = this.data.programme_id.attributes.auditState
            if (auditState === undefined) {
              return ''
            } else if (auditState === 0) {
              return ACTIVE
            } else {
              return COMPLETE
            }
          }
        case 2:
          if (this.data.state === 1) {
            return ACTIVE
          } else if (this.data.state > 1) {
            return COMPLETE
          } else {
            return ''
          }
        case 3:
          if (this.data.state === 2) {
            return ACTIVE
          } else if (this.data.state > 2) {
            return COMPLETE
          } else {
            return ''
          }
        case 4:
          if (this.data.state === 3) {
            return ACTIVE
          } else if (this.data.state > 3) {
            return COMPLETE
          } else {
            return ''
          }
        case 5:
          if (this.data.state === 5 || this.data.state === 7) {
            return ACTIVE
          } else if (this.data.state === 6) {
            return COMPLETE
          } else {
            return ''
          }
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.row
  position relative
  min-height 80px
  background-color #ffffff
  display flex
  padding-left 10px
  color #999

  &.is-active
    color #46BAFF

  &.is-complete
    color #29f090

  &::after
    content ' '
    display inline-block
    position absolute
    left 45px
    width 2px
    top 60px
    bottom 0
    background-color currentColor

  &::before
    content ' '
    display inline-block
    position absolute
    left 45px
    width 2px
    top 0px
    height 10px
    background-color currentColor

  &[first]
    &:before
      display none

  &[last]
    &:after
      display none

  &-icon
    i
      display inline-block
      padding 10px
      margin 10px
      font-size 26px
      border 2px solid currentColor
      border-radius 50%

  &-text
    margin 24px 0 0 10px
    flex 1

.lawLink
  >>> .yt-cell-font
    color #46BAFF
</style>
